<template>
    <div id="relationEventForward">
        <el-row>
            <div class="head-line-bottom">
                <i class="el-icon-message-solid left"></i>
                设置前项关联事件后，待归因事件只能与前项关联事件的属性进行关联，未设置则与目标转化事件进行关联
            </div>
        </el-row>

        <div class="box-center">
            <template v-for="(item,index) in relationList">
                <template v-for="(leftItem,leftIndex) in leftList">
                    <div class="box-context" :key="index+''+leftIndex">
                        <div class="box-context">
                            <el-row>
                                <el-col :span="1"><div class="box-occupy"></div></el-col>
                                <el-col :span="3" class="col-item"> <i class="el-icon-paperclip relation-text"></i>关联属性</el-col>
                                <el-col :span="20" class="col-item">
                                    <el-select size="small" class="relation-sel" :value="leftItem.item.cname" disabled>

                                    </el-select>

                                    <el-select size="small" class="relation-sel-value" value-key="name" v-model="item.current[leftIndex]" @change="refreshPage">
                                        <el-option v-for="cItem in leftItem.propertes" :value="cItem"
                                                   :label="cItem.cname"></el-option>
                                    </el-select>

                                    <span style="margin-left: 10px">关联</span>

                                    <el-select size="small" class="relation-sel" style="margin-left: 10px" value-key="eventId" :value="item.cname" disabled>

                                    </el-select>

                                    <el-select size="small" class="relation-sel-value" value-key="name" v-model="item.target[leftIndex]" @change="refreshPage">
                                        <el-option v-for="cItem in item.propertes" :value="cItem"
                                                   :label="cItem.cname"></el-option>
                                    </el-select>
                                </el-col>
                            </el-row>
                        </div>
                    </div>


                </template>
            </template>
        </div>

    </div>
</template>

<script>
    import vue from "./bus"
    import customScreen from "./customScreen";
    import {thinglList,propertyList} from "./attribution"
    export default {
        name: "relationEventForward",
        components:{
            'ml-custom-screen': customScreen
        },
        props:{
            rightList: {
                type: Array
            }
        },
        data() {
            return {
                leftList:[],
                //选择事件属性列表
                eventPropertiesList:[],
            }
        },
        computed:{
            //存储当前事件的集合
            relationList:{
                get(){
                    let items = []
                    for (let i = 0; i < this.rightList.length; i++) {
                        items[i] = this.rightList[i]
                        items[i].key = Symbol()
                        items[i].current = [{},{}]
                        items[i].target = []
                    }
                    return items
                },
                set(){

                }
            }
        },
        created() {
            this.initData()
        },
        mounted() {
            this.loadList()
        },
        methods: {
            getEvents(){
                let events = []
                for (let i = 0; i < this.relationList.length; i++) {
                    let relationItem = this.relationList[i]
                    let item = {}
                    item['eventName'] = relationItem.eventId
                    item['linkEvents'] = []
                    for (let j = 0; j < relationItem.current.length; j++) {
                        if (relationItem.current[j]?.name&&relationItem.target[j]?.name){
                            let itemLink ={}
                            itemLink['eventName'] = this.leftList[j].name
                            itemLink['linkProperties'] = {}
                            itemLink['linkProperties']['currentEventProperty'] = 'event' + '.' + this.leftList[j].item.eventId + '.' + relationItem.current[j].name
                            itemLink['linkProperties']['targetEventProperty'] = 'event' + '.' + this.leftList[j].item.eventId + '.' + relationItem.target[j].name
                            item['linkEvents'].push(itemLink)
                        }
                    }
                    events.push(item)
                }
                return events
            },
            refreshPage(){
                this.$forceUpdate()
            },
            loadList(){
               this.leftList = JSON.parse(sessionStorage.getItem("forwardList"))
            },
            //添加筛选项
            addCustom(index){
                this.$refs[`customScreenRef${index}`][0].editCond()
            },
            initData(){
                //全部回档
                this.relationList = []
                this.eventPropertiesList = []
            }
        },
        watch:{

        }
    }
</script>

<style scoped lang="scss">

    #relationEventForward{
        min-height: 200px;
    }
    .head-line-bottom {
        padding: 5px 0px;
        background-color: #e6f7ff;
        width: 100%;
        height: 20px;

        .left {
            margin-left: 5px;
        }
    }

    .box-center{
        max-height: 350px;
        overflow: auto;
    }

    .box-context {
        margin-top: 20px;
        .col-item{
            height: 32px;
            line-height: 32px;
        }
        .relation-text{
            padding-left: 7px;
        }
        .relation-sel{
            width: 200px;
        }
        .relation-sel-value{
            margin-left: 10px;
            width: 120px;
        }
        .box-occupy{
            height: 1px;
        }
    }

    .box-context-last{
        position: relative;
        .col-item{
            height: 32px;
            line-height: 32px;
        }
        .relation-text{
            padding-left: 7px;
        }
        .relation-sel{
            width: 200px;
        }
        .relation-sel-value{
            margin-left: 10px;
            width: 120px;
        }
        .box-occupy{
            height: 1px;
        }
    }
</style>